import styled from 'styled-components'
import { Avatar } from '@/components/Avatar'
import { accountType } from '@/api/global/interface'

const Wrap = styled.div`
	height: 38px;
	line-height: 38px;
	user-select: none;
	position: relative;
	padding-left: 10px;
	font-size: 12px;
	color: #fff;
	background: url()
		no-repeat #5eb9ef;
	background: linear-gradient(90deg, #2d8bc0, #53afe4);
	> div {
		float: left;
	}
	.avatar {
		margin-right: 10px;
		height: 38px;
		line-height: 38px;
		padding-top: 3px;
		box-sizing: border-box;
	}
	.name {
		width: calc(100% - 24px - 10px - 25px - 10px);
		pre {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
`

type Ix = {
	account_type: accountType
	portrait?: string
	name: string
}

interface ListItemGhostProps<T extends Ix> {
	data: T
}
export function ListItemGhost<T extends Ix>({ data }: ListItemGhostProps<T>) {
	return (
		<Wrap>
			<div className="avatar">
				<Avatar value={{ accountType: data.account_type, ...data }} />
			</div>
			<div className="name">
				<pre>{data.name}</pre>
			</div>
		</Wrap>
	)
}
